<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <style>
        .nav {
            height: 50px;
            /* background-color: red; */
            padding: 20px 0 6px 0;
        }

        .wrap {
            padding: 0 24px;
        }

        .content {
            margin-top: 16px;
        }
    </style>
</head>
<bady>
    <div class="wrap">
        <div class="nav position-relative">
            <span>基础资料</span>
            <div class=" position-absolute top-0 end-0 "
                style="padding:8px;background-color:rgba(229, 227, 227, 0.763);">

                <button type="submit" class="btn btn-primary btn-sm save">保存</button>
            </div>
        </div>
        <hr style="margin:0">
        <div class="content">

            <div class="list">
                <div class="container" style="max-width:none">
                    <div class="row">
                        <!-- 商品编号 -->
                        <div class="col">
                            <div class="row mb-3">
                                <label for="colFormLabelSm" class="col-sm-3 col-form-label col-form-label-sm">商品编号 :
                                </label>
                                <div class="col-sm-7">
                                    <input type="email" class="form-control form-control-sm commoditycoding" id="colFormLabelSm"
                                        placeholder="SP+000001建议英文+数字">
                                </div>
                            </div>
                            </select>
                        </div>
                        <!-- 商品名称 -->
                        <div class="col">
                            <div class="row mb-3">
                                <label for="colFormLabelSm" class="col-sm-3 col-form-label col-form-label-sm">商品名称 :
                                </label>
                                <div class="col-sm-7">
                                    <input type="email" class="form-control form-control-sm commodityname" id="colFormLabelSm"
                                        placeholder="">
                                </div>
                            </div>
                        </div>
                        <div class="col"></div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="row mb-3">
                                <label for="colFormLabelSm" class="col-sm-3 col-form-label col-form-label-sm">商品条码 :
                                </label>
                                <div class="col-sm-7">
                                    <input type="email" class="form-control form-control-sm barcode" id="colFormLabelSm"
                                        placeholder="">
                                </div>
                                <div class="col-sm-2">
                                    <button type="submit" class="btn btn-primary"
                                        style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">查询</button>
                                </div>
                            </div>
                        </div>
                        <div class="col order-5">
                        </div>
                        <div class="col order-5">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="row mb-3">
                                <label for="colFormLabelSm" class="col-sm-3 col-form-label col-form-label-sm ">规格型号 :
                                </label>
                                <div class="col-sm-7">
                                    <input type="email" class="form-control form-control-sm model" id="colFormLabelSm"
                                        placeholder="">
                                </div>
                            </div>
                        </div>
                        <div class="col order-5">
                            <div class="row mb-3">
                                <label for="colFormLabelSm" class="col-sm-3 col-form-label col-form-label-sm">商品类别 :
                                </label>
                                <div class="col-sm-7">
                                    <select class="form-select commodityred" id="autoSizingSelect">
                                        <!-- <option selected>Choose...</option>
                                        <option value="1">One</option>
                                        <option value="2">Two</option>
                                        <option value="3">Three</option> -->
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col order-5">
                            <div class="row mb-3">
                                <label for="colFormLabelSm" class="col-sm-3 col-form-label col-form-label-sm">首选仓库 :
                                </label>
                                <div class="col-sm-7">
                                    <select class="form-select warehousecategoryred" id="autoSizingSelect">
                                        <!-- <option selected>Choose...</option>
                                        <option value="1">One</option>
                                        <option value="2">Two</option>
                                        <option value="3">Three</option> -->
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="col order-5">
                                <div class="row mb-3">
                                    <label for="colFormLabelSm" class="col-sm-3 col-form-label col-form-label-sm">计量单位 :
                                    </label>
                                    <div class="col-sm-7">
                                        <select class="form-select unitofmeasurementred" id="autoSizingSelect">
                                            <!-- <option selected>Choose...</option>
                                            <option value="1">One</option>
                                            <option value="2">Two</option>
                                            <option value="3">Three</option> -->
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col order-5">

                        </div>
                        <div class="col order-5">

                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="row mb-3">
                                <label for="colFormLabelSm" class="col-sm-3 col-form-label col-form-label-sm">产地 :
                                </label>
                                <div class="col-sm-7">
                                    <input type="email" class="form-control form-control-sm producingarea" id="colFormLabelSm"
                                        placeholder="">
                                </div>
                            </div>
                        </div>
                        <div class="col order-5">
                            <div class="row mb-3">
                                <label for="colFormLabelSm" class="col-sm-3 col-form-label col-form-label-sm">注册证号 :
                                </label>
                                <div class="col-sm-7">
                                    <input type="email" class="form-control form-control-sm registration" id="colFormLabelSm"
                                        placeholder="">
                                </div>
                            </div>
                        </div>
                        <div class="col order-5">
                            <div class="row mb-3">
                                <label for="colFormLabelSm" class="col-sm-3 col-form-label col-form-label-sm">生产许可证 :
                                </label>
                                <div class="col-sm-7">
                                    <input type="email" class="form-control form-control-sm licensekey" id="colFormLabelSm"
                                        placeholder="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="row mb-3">
                                <label for="colFormLabelSm" class="col-sm-3 col-form-label col-form-label-sm">供应商 :
                                </label>
                                <div class="col-sm-7">
                                    <select class="form-select supplierred" id="autoSizingSelect">
                                        <!-- <option selected>Choose...</option>
                                        <option value="1">One</option>
                                        <option value="2">Two</option>
                                        <option value="3">Three</option> -->
                                    </select>
                                    <!-- <input type="email" class="form-control form-control-sm" id="colFormLabelSm"
                                        placeholder=""> -->
                                </div>
                                <!-- <div class="col-sm-2">
                                    <button type="submit" class="btn btn-primary" data-bs-toggle="modal"
                                        data-bs-target="#exampleModal"
                                        style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">查询</button>
                                </div> -->
                            </div>
                        </div>
                        <div class="col order-5">
                            <div class="row mb-3">
                                <label for="colFormLabelSm" class="col-sm-3 col-form-label col-form-label-sm">品牌 :
                                </label>
                                <div class="col-sm-7">
                                    <select class="form-select brand" id="autoSizingSelect">
                                        <!-- <option selected>Choose...</option> -->
                                        <!-- <option value="1">One</option>
                                        <option value="2">Two</option>
                                        <option value="3">Three</option> -->
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col order-5">

                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="row mb-3">
                                <label for="colFormLabelSm" class="col-sm-3 col-form-label col-form-label-sm">零售价 :
                                </label>
                                <div class="col-sm-7">
                                    <input type="email" class="form-control form-control-sm retailprice" id="colFormLabelSm"
                                        placeholder="">
                                </div>
                            </div>
                        </div>
                        <div class="col order-5">
                            <div class="row mb-3">
                                <label for="colFormLabelSm" class="col-sm-3 col-form-label col-form-label-sm">批发价 :
                                </label>
                                <div class="col-sm-7">
                                    <input type="email" class="form-control form-control-sm wholesaleprice" id="colFormLabelSm"
                                        placeholder="">
                                </div>
                            </div>
                        </div>
                        <div class="col order-5">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <!-- ---------------------------------------------------------------------------- -->
    <!-- Modal -->
    <div class="modal fade " id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">选择供应商</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="input-group mb-3">
                        <input type="text" class="form-control" placeholder="请输入名称" aria-label="Recipient's username"
                            aria-describedby="button-addon2">
                        <button class="btn btn-outline-secondary" type="button" id="button-addon2">查询</button>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        commodityred();
        warehousecategoryred();
        unitofmeasurementred();
        supplierred();
        add();
        // 商品类别
        function commodityred() {
            $.ajax({
                method: "post",
                url: "http://localhost:3000/commcat/select",
                data: {},
                success: function (data) {
                    rander(data);
                },
                error: function (e) {
                    console.log(JSON.stringify(e));
                }
            });
            function rander(data) {
                let html = `<option selected></option>`;
                data.forEach(item => {
                    html += `<option value="${ item.id }">${ item.category }</option>`
                })
                $(".commodityred").html(html);
            }
        }
        //    仓库类别
        function warehousecategoryred() {
            $.ajax({
                method: "post",
                url: "http://localhost:3000/warehouseadd/select",
                data: {},
                success: function (data) {
                    rander(data);
                },
                error: function (e) {
                    console.log(JSON.stringify(e));
                }
            });
            function rander(data) {
                let html = `<option selected></option>`;
                data.forEach(item => {
                    html += `<option value="${ item.warehousenumber }">${ item.warehousename }</option>`
                })
                $(".warehousecategoryred").html(html);
            }
        }
        //   计量单位
        function unitofmeasurementred() {
            $.ajax({
                method: "post",
                url: "http://localhost:3000/measureadd/select",
                data: {},
                success: function (data) {
                    rander(data);
                },
                error: function (e) {
                    console.log(JSON.stringify(e));
                }
            });
            function rander(data) {
                let html = `<option selected></option>`;
                data.forEach(item => {
                    html += `<option value="${ item.id }">${ item.measurename }</option>`
                })
                $(".unitofmeasurementred").html(html);
            }
        }
        // 供应商
        function supplierred() {
            $.ajax({
                method: "post",
                url: "http://localhost:3000/supplieradmin/select",
                data: {},
                success: function (data) {
                    rander(data);
                },
                error: function (e) {
                    console.log(JSON.stringify(e));
                }
            });
            function rander(data) {
                let html = `<option selected></option>`;
                data.forEach(item => {
                    html += `<option value="${ item.suppliernumber }">${ item.suppliername }</option>`
                })
                $(".supplierred").html(html);
            }
        }

        // 添加商品
        function add() {
            $(".save").click(function () {
                if ($(".commoditycoding").val() != "" && $(".commodityname").val() != "") {
                    $.ajax({
                        method: "post",
                        url: "http://localhost:3000/add/add",
                        data: {
                            "commoditycoding": $(".commoditycoding").val(), //编号
                            "commodityname": $(".commodityname").val(), //名称
                            "barcode": $(".barcode").val(),  //条码号
                            "model": $(".model").val(),  //规格型号
                            "category": $(".commodityred").val(),  //商品类别
                            "warehouse": $(".warehousecategoryred").val(),  //首选仓库
                            "metering": $(".unitofmeasurementred").val(),  //计量单位
                            "producingarea": $(".producingarea").val(),  //产地
                            "registration": $(".registration").val(),  //注册证件号
                            "licensekey": $(".licensekey").val(),  //生产许可证
                            "supplier": $(".supplierred").val(),  //供应商
                            // "brand": $(".brand").val(),  //品牌
                            "retailprice": $(".retailprice").val(),  //零售价
                            "wholesaleprice": $(".wholesaleprice").val()  //批发价
                        },
                        success: function (data) {
                            console.log(data);

                        },
                        error: function (e) {
                            console.log(JSON.stringify(e));
                        }
                    })
                } else {
                    alert("商品编号或商品名称不能为空")
                }
            }
            );
        }
    </script>
</bady>

</html>